<template lang="pug">
  div( style="height:calc(100% - 10px)")
   myTable(:mySeach="mySeach" :tableHeader="tableHeader" :myTableButtons="myButton" :myButtons="[]" seachMenth="POST" seachUrl="/web/classes/getClassCheckList" )
</template>
<script>
import myTable from '../components/myTable.vue'
import { getClassesByArea } from '@/api/common'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'ClockingIn',
  components: {
    myTable
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  data () {
    return {
      dialogVisible: false,
      mySeach: [
        {
          label: '日期',
          type: 'date',
          placeholder: '选择日期',
          prop: 'todayDate',
          clearable: false,
          value: dayjs(new Date()).format('YYYY-MM-DD')
        },
        {
          label: '班级',
          type: 'select',
          prop: 'id',
          data: []
        }
      ],
      tableHeader: [
        {
          label: '班级名称',
          prop: 'classesName'
        },
        {
          label: '总人数',
          prop: 'classesTotal'
        },
        {
          label: '实到人数',
          prop: 'actualArrivalTotal'
        },
        {
          label: '出勤率',
          prop: 'attendanceRate'
        }
      ],
      myButton: [
        {
          label: '详情',
          click: (data) => {
            console.log('data', data)
          }
        }
      ]
    }
  },
  async mounted () {
    // 获取班级
    this.mySeach[1].data = await (getClassesByArea({ areaId: this.curArea.areaId }) || [])
    console.log('班级', this.mySeach[1].data)
    this.myButton[0].click = (data, search) => {
      console.log('详情', data)
      this.$router.push(`/educationalAdministration/clockingIn/info/${data.row.classesId}/${search.todayDate}/${data.row.classesName}`)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
